<!--
 * @Description: 首页大屏
 * @Date: 2024-03-13 09:35:08
-->
<template>
	<div class="visualizing-container">
		<div class="top">标题部分</div>
    <div class="content">
      <div class="left-box">
        <div class="left-content-box">
          <div class="cloud">
            这里显示词云
          </div>
          <div class="pedestal">
            <span>全国</span>
          </div>
          <div class="light-box">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </div>
      </div>
      <svg height="400" width="400" style="position: absolute;left: 300px;top: -20px;">
        <path d="M 100 350 q 150 -200 400 100" stroke="#deeafd" stroke-width="2" fill="none" stroke-dasharray="5,10" />
        <polygon points="0,0 0,10 10,5" fill="#deeafd">
          <animateMotion path="M 100 350 q 150 -200 400 100" dur="5" repeatCount="indefinite" retate="auto"></animateMotion>
        </polygon>
        <!-- <g stroke="black" stroke-width="3" fill="black">
          <polygon points="400,240 400,260 385,250" style="fill:#ccc;stroke:#ccc;stroke-width:1"/>
        </g> -->
      </svg>
      <div class="earth-container">
        <!--	圆心-->
        <div class="circle"><span style="font-size: 26px;font-family: 'TRENDS';">标题</span></div>
        <!--	第一层-->
        <div class="borther">
          <div id="lopp"></div>
          <div class="ball" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(1)">集成商</div>
          <div class="ball" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(2)">托管商</div>
          <div class="ball" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(3)">升级专家</div>
          <div class="ball" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(4)">改造专家</div>
          <div class="ball" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(5)">设计专家</div>
        </div>
        <!--	第二层-->
        <div class="borther2">
          <div id="lopp2"></div>
          <div class="ball ball2" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(6)">多专业</div>
          <div class="ball ball2" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(7)">多科室</div>
          <div class="ball ball2" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(8)">数字化</div>
          <div class="ball ball2" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(9)">信息化</div>
          <div class="ball ball2" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="clickMsg(10)">智能化</div>
        </div>
      </div>
      <div class="right-box">
        <div class="right-content-box">
          <div class="top-cloud">
            <div class="cloud">
              <img src="../../assets/screen/3.png" alt="pc">
            </div>
            <div class="pedestal">
              <span>PC</span>
            </div>
            <div class="light-box">
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
            </div>
          </div>
          <svg height="400" width="400" style="position: absolute;right: 340px;top: -20px;">
            <path d="M 100 350 q 150 -300 400 0" stroke="#8870f5" stroke-width="2" fill="none" stroke-dasharray="5,10" />
            <polygon points="0,0 0,10 10,5" fill="#9e8eef">
              <animateMotion path="M 100 350 q 150 -300 400 0" dur="5" repeatCount="indefinite" retate="auto"></animateMotion>
            </polygon>
          </svg>

          <div class="bottom-cloud">
            <div class="cloud">
              文字
            </div>
            <div class="pedestal">
              <span>小程序</span>
            </div>
            <div class="light-box">
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
            </div>
          </div>
          <svg height="360" width="360" style="position: absolute;right: 340px;bottom: 30px;">
            <path d="M 50 100 q 200 -60 330 180" stroke="#86e1fb" stroke-width="2" fill="none" stroke-dasharray="5,10" />
            <polygon points="0,0 0,10 10,5" fill="#87e1fb">
              <animateMotion path="M 50 100 q 200 -60 330 180" dur="5" repeatCount="indefinite" restart="auto"></animateMotion>
            </polygon>
          </svg>
        </div>
      </div>
    </div>
    <div class="bottom">下方</div>
	</div>
</template>

<script setup lang="ts" name="screenHome">
import { reactive, onMounted, onUnmounted, ref } from 'vue';
import 'echarts/extension/bmap/bmap';
import { formatDate } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';

// 定义变量内容
const visualizingDemo1 = ref();
const state = reactive({
	time: {
		txt: '',
		fun: 0,
	},
});
let items:any = [];

// 初始化时间
const initTime = () => {
	state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
	state.time.fun = window.setInterval(() => {
		state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
	}, 1000);
};

// 页面加载时
onMounted(async () => {
	NextLoading.done();

  items =  document.querySelectorAll('.ball');
  // items[0].style['animation-delay'] = '-5s,0s,0s';
	// items[0].querySelector('.item__circle').style['transform'] = 'scale(1.5)';
	//
	for (var i = 0; i < items.length; i++) {
		(function (i) {
			items[i].style['animation-delay'] = (-5) - 4 * i + 's,' + (-4 * i) + 's,' + (-4 * i) + 's'
		})(i);
	}
});

// 页面卸载时
onUnmounted(() => {
	window.clearInterval(state.time.fun); 
});

	
const onMouseEnter = () => {
  // document.querySelectorAll('.ball').classList.add('active')
  for (let i = 0; i < items.length; i++) {
    (function (i) {
      items[i].classList.add('active')
    })(i);
  }
}
const onMouseLeave = () =>  {
  // document.getElementsByClassName('ball').classList.remove('active')
  for (let i = 0; i < items.length; i++) {
    (function (i) {
      items[i].classList.remove('active')
    })(i);
  }
}
const clickMsg = (e:any) =>  {
  alert(e)
}
</script>

<style scoped lang="scss">
@font-face {
  font-family: 'TRENDS';
  src: url('../../assets/font/时尚中黑简体.ttf');
}
// 左右两侧图表宽度
$lrWidth: 300px;
.visualizing-container {
  background: url("../../assets/screen/bg.png") no-repeat center / cover;
	height: 100vh;
	width: 100%;
	position: relative;
	display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'TRENDS';

  .top{
    width: 100%;
    height: 70px;
    border: 1px dashed rgba(255, 228, 196, 0.578);
    color: #ffffffd9;
    text-align: center;
    line-height: 70px;
    font-size: 30px;
  }

  .content{
    flex: 1;
    display: flex;
    flex-direction: row;

    .left-box{
      flex: 1;
      position: relative;

      .left-content-box{
        color: #fff;
        position: absolute;
        top: 30%;
        left: 20%;
        width: 300px;
        height: 300px;

        .cloud{
          background: url("../../assets/screen/cloud.png") no-repeat center / 100% 100%;
          height: 13rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .pedestal {
            width: 100%;
            height: 6rem;
            margin-top: 1rem;
            text-align: center;
            background: url("../../assets/screen/pedestal.png") no-repeat center / 16rem 100%;

            span {
              font-size: 2rem;
              color: #dceaff;
              text-shadow: 4px 2px 13px rgba(0, 109, 250, 0.85);
              display: inline-block;
              transform: translateY(0.5rem);
            }
        }

        .light-box {
          width: 19rem;
          height: 9rem;
          position: absolute;
          transform: translate(1rem, -11rem);
          overflow: hidden;
          white-space: nowrap;
          display: flex;
          justify-content: space-around;

          .item {
            width: 2px;
            height: 6rem;
            opacity: .8;
            display: inline-block;
            border: none;
            background: linear-gradient(180deg, #20aaff, rgba(6, 11, 31, 0.00));
            transform: translateY(9rem);
            animation: up-top 3s infinite linear;
          }

          .item:nth-child(1) {
            opacity: .5;
            height: 3rem;
            animation: up-top 1s infinite linear;
          }

          .item:nth-child(2) {
            opacity: .4;
            height: 4rem;
            animation-delay: 100ms;
            animation: up-top 2s infinite linear;
          }

          .item:nth-child(3) {
            height: 1.6rem;
            opacity: .8;
            animation-delay: 250ms;
            animation: up-top 3s infinite linear;
          }

          .item:nth-child(4) {
            height: 3rem;
            opacity: .8;
            animation-delay: 600ms;
            animation: up-top 1s infinite linear;
          }

          .item:nth-child(5) {
            height: 4rem;
            opacity: .8;
            animation-delay: 250ms;
            animation: up-top 4s infinite linear;
          }

          .item:nth-child(6) {
            height: 5rem;
            animation-delay: 630ms;
            animation: up-top 2s infinite linear;
          }

          .item:nth-child(7) {
            height: 4rem;
            animation-delay: 470ms;
            animation: up-top 4s infinite linear;
          }

          .item:nth-child(8) {
            transform: translateY(9rem);
            animation-delay: 720ms;
            animation: up-top 3s infinite linear;
          }

          @keyframes up-top {
            0% {
              opacity: 1;
              transform: translateY(9rem);
            }
            100% {
              opacity: .5;
              transform: translateY(-6rem);
            }
          }
        }
      }
    }

    .right-box{
      flex: 1;
      position: relative;
      
      .right-content-box{
        color: #fff;
        display: flex;
        flex-direction: column;

        .top-cloud{
          position: absolute;
          top: 3%;
          left: 20%;
          width: 300px;
          height: 300px;
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: center;
          align-items: center;
          .cloud{
            background: url("../../assets/screen/1.png") no-repeat center / 100% 100%;
            height: 6rem;
            width: 8rem;
            display: flex;
            justify-content: center;
            align-items: center;

            img{
              animation: rotetaCard 3s infinite ease-in;
            }
            @keyframes rotetaCard {
              from {
                transform: rotateY(0);
              }
              to {
                transform: rotateY(180deg);
              }
            }
          }

          .pedestal {
              width: 100%;
              height: 6rem;
              margin-top: 1rem;
              text-align: center;
              background: url("../../assets/screen/top-pedestal.png") no-repeat center / 16rem 100%;

              span {
                font-size: 2rem;
                color: #dceaff;
                text-shadow: 4px 2px 13px rgba(0, 109, 250, 0.85);
                display: inline-block;
                transform: translateY(0.5rem);
              }
          }

          .light-box {
            width: 18rem;
            height: 6rem;
            position: absolute;
            transform: translate(0rem, 0rem);
            overflow: hidden;
            white-space: nowrap;
            display: flex;
            justify-content: space-around;

            .item {
              width: 2px;
              height: 6rem;
              opacity: .8;
              display: inline-block;
              border: none;
              background: linear-gradient(180deg, #20aaff, rgba(6, 11, 31, 0.00));
              transform: translateY(9rem);
              animation: up-top 3s infinite linear;
            }

            .item:nth-child(1) {
              opacity: .5;
              height: 3rem;
              animation: up-top 1s infinite linear;
            }

            .item:nth-child(2) {
              opacity: .4;
              height: 4rem;
              animation-delay: 100ms;
              animation: up-top 2s infinite linear;
            }

            .item:nth-child(3) {
              height: 1.6rem;
              opacity: .8;
              animation-delay: 250ms;
              animation: up-top 3s infinite linear;
            }

            .item:nth-child(4) {
              height: 3rem;
              opacity: .8;
              animation-delay: 600ms;
              animation: up-top 1s infinite linear;
            }

            .item:nth-child(5) {
              height: 4rem;
              opacity: .8;
              animation-delay: 250ms;
              animation: up-top 4s infinite linear;
            }

            .item:nth-child(6) {
              height: 5rem;
              animation-delay: 630ms;
              animation: up-top 2s infinite linear;
            }

            .item:nth-child(7) {
              height: 4rem;
              animation-delay: 470ms;
              animation: up-top 4s infinite linear;
            }

            .item:nth-child(8) {
              transform: translateY(9rem);
              animation-delay: 720ms;
              animation: up-top 3s infinite linear;
            }

            @keyframes up-top {
              0% {
                opacity: 1;
                transform: translateY(9rem);
              }
              100% {
                opacity: .5;
                transform: translateY(-6rem);
              }
            }
          }
        }

        .bottom-cloud{
          position: absolute;
          bottom: 10%;
          left: 20%;
          width: 300px;
          height: 300px;
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: center;
          align-items: center;

          .cloud{
            background: url("../../assets/screen/2.png") no-repeat center / 100% 100%;
            height: 6rem;
            width: 8rem;
          }

          .pedestal {
              width: 100%;
              height: 6rem;
              margin-top: 1rem;
              text-align: center;
              background: url("../../assets/screen/bottom-pedestal.png") no-repeat center / 16rem 100%;

              span {
                font-size: 2rem;
                color: #dceaff;
                text-shadow: 4px 2px 13px rgba(0, 109, 250, 0.85);
                display: inline-block;
                transform: translateY(0.5rem);
              }
          }

          .light-box {
            width: 16rem;
            height: 6rem;
            position: absolute;
            transform: translate(0rem, 0rem);
            overflow: hidden;
            white-space: nowrap;
            display: flex;
            justify-content: space-around;

            .item {
              width: 2px;
              height: 6rem;
              opacity: .8;
              display: inline-block;
              border: none;
              background: linear-gradient(180deg, #20aaff, rgba(6, 11, 31, 0.00));
              transform: translateY(9rem);
              animation: up-top 3s infinite linear;
            }

            .item:nth-child(1) {
              opacity: .5;
              height: 3rem;
              animation: up-top 1s infinite linear;
            }

            .item:nth-child(2) {
              opacity: .4;
              height: 4rem;
              animation-delay: 100ms;
              animation: up-top 2s infinite linear;
            }

            .item:nth-child(3) {
              height: 1.6rem;
              opacity: .8;
              animation-delay: 250ms;
              animation: up-top 3s infinite linear;
            }

            .item:nth-child(4) {
              height: 3rem;
              opacity: .8;
              animation-delay: 600ms;
              animation: up-top 1s infinite linear;
            }

            .item:nth-child(5) {
              height: 4rem;
              opacity: .8;
              animation-delay: 250ms;
              animation: up-top 4s infinite linear;
            }

            .item:nth-child(6) {
              height: 5rem;
              animation-delay: 630ms;
              animation: up-top 2s infinite linear;
            }

            .item:nth-child(7) {
              height: 4rem;
              animation-delay: 470ms;
              animation: up-top 4s infinite linear;
            }

            .item:nth-child(8) {
              transform: translateY(9rem);
              animation-delay: 720ms;
              animation: up-top 3s infinite linear;
            }

            @keyframes up-top {
              0% {
                opacity: 1;
                transform: translateY(9rem);
              }
              100% {
                opacity: .5;
                transform: translateY(-6rem);
              }
            }
          }
        }
      }
    }
    .earth-container{
        position: relative;
        transform: rotateX(20deg);
        width: 800px;
        height: calc(100vh - 320px);
        margin: 0 auto;
        /*第一层*/
        @keyframes animX{
          0% {
            left: 40px;
          }
          100% {
            left: 640px;
          }
        }
        @keyframes animY{
          0% {
            top: 150px;
          }
          100% {
            top: 500px;
          }
        }
        @keyframes scale {
          0% {
            transform: scale(0.4);
            z-index: 0
          }
          50% {
            transform: scale(1);
            z-index: 3
          }
          100% {
            transform: scale(0.5);
            z-index: 0
          }
        }

        .ball {
          width: 105px;
          height: 105px;
          cursor: pointer;
          border-radius: 50%;
          position: absolute;
          color:#dce8fb;
          font-size:22px;
          // font-family: cursive;
          font-family: 'TRENDS';
          display:flex;
          align-items:center;
          justify-content:center;
          background-image: radial-gradient(70% 125%, #000A36 50%, #1D317F 100%);
          box-shadow: 0 2px 7px 2px #4B68DF, inset 0 1px 36px 11px rgba(104,91,255,0.51); 
          background-size: 100% 100%;
          -webkit-background-size: 100% 100%;
          line-height: 120px;
          z-index: 3;
          /*动画执行一次所需时间*/
          animation-duration: 10s, 10s, 20s;
          /*动画以何种运行轨迹完成一个周期*/
          animation-timing-function: cubic-bezier(0.36,0,0.64,1);
          /*动画播放次数,无线循环播放*/
          animation-iteration-count: infinite;
          /*是否轮流反向播放动画 alternate:正向播放*/
          animation-direction: alternate;
          animation-name: animX, animY, scale;
        }

        #lopp {
          width: 600px;
          height: 370px;
          border: 2px solid #4e69d180;
          border-radius: 50%;
          position: absolute;
          left: 90px;
          top: 200px;
        }
        /*鼠标进入停止*/
        .active {
          animation-play-state: paused;
        }

        /*第二层*/
        @keyframes anim2X{
          0% {
            left: 200px;
          }
          100% {
            left: 500px;
          }
        }
        @keyframes anim2Y{
          0% {
            top: 230px;
          }
          100% {
            top: 400px;
          }
        }
        .ball2 {
          z-index: 3;
          cursor: pointer;
          width: 88px;
          height: 88px;
          border-radius: 50%;
          position: absolute;
          color:#fff;
          font-size: 20px;
          text-shadow: 4px 2px 13px rgba(0,109,250,0.85);
          display:flex;
          align-items:center;
          justify-content:center;
          background: #c7258b90;
          background-size: 100% 100%;
          -webkit-background-size: 100% 100%;
          /*line-height: 120px;*/
          /*动画执行一次所需时间*/
          animation-duration: 10s, 10s, 20s;
          /*动画以何种运行轨迹完成一个周期*/
          animation-timing-function: cubic-bezier(0.36,0,0.64,1);
          /*动画播放次数,无线循环播放*/
          animation-iteration-count: infinite;
          /*是否轮流反向播放动画 alternate:正向播放*/
          animation-direction: alternate;
          animation-name: anim2X, anim2Y,scale;
        }
        #lopp2 {
          width: 300px;
          height: 150px;
          border: 2px solid #4e69d170;
          border-radius: 50%;
          position: absolute;
          left: 230px;
          top: 280px;
        }
        .circle {
          position: absolute;
          top: 240px;
          left: 290px;
          background: red;
          border-radius: 50%;
          width: 190px;
          height: 190px;
          z-index: 3;
          color: #fff;
          font-size: 16px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          cursor: pointer;
          // background: lightgreen;
          background: url("../../assets/screen/center-circle.png") no-repeat center / cover;
          background-size: 100% 100%;
          -webkit-background-size: 100% 100%;
        }

    }
  }

  .bottom{
    width: 100%;
    height: 250px;
    border: 1px dashed darkgray;
  }
}
</style>

